<template>
	<view class="home">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="panel panel-a">
			<view class="panel-header">
				<image 
					class="icon" 
					mode="aspectFit" 
					src="@/static/icon/iv_head.png">
				</image>
			</view>
			<view class="panel-body">
				用户名：{{ userName }}
			</view>
			<view class="panel-footer">
				角色：{{ roleName }}
			</view>
			<view class="panel-right card card-not" @tap="openPage('/pages/message/message', unReadCount)">
				<text class="card-badge" v-if="unReadCount">{{ unReadCount }}</text>
				<image class="icon card-icon" mode="aspectFit" src="@/static/icon/iv_not.png"></image>
			</view>
		</view>
		
		<view class="navbar">
			<view class="navbar-group">
				<view class="navbar-item" v-for="(menu, index) in menus" :key="index" v-show="menu.show">
					<view class="card card-a" @tap="openPage(menu.url, true)">
						<view class="card-header">
							<image class="icon" mode="aspectFit" :src="menu.icon"></image>
						</view>
						<view class="card-body">{{ menu.label }}</view>
					</view>
				</view>
				<view class="navbar-item">
					<view class="card card-a" @tap="openPage('/pages/doc/agreement', true)">
						<view class="card-header">
							<image class="icon" mode="aspectFit" src="@/static/icon/icon_agreement.png"></image>
						</view>
						<view class="card-body">用户服务协议</view>
					</view>
				</view>
				<view class="navbar-item">
					<view class="card card-a" @tap="openPage('/pages/doc/privacy', true)">
						<view class="card-header">
							<image class="icon" mode="aspectFit" src="@/static/icon/icon_privacy.png"></image>
						</view>
						<view class="card-body">隐私政策</view>
					</view>
				</view>
				<view class="navbar-item">
					<view class="card card-a" @tap="openPage('/pages/index/help', true)">
						<view class="card-header">
							<image class="icon" mode="aspectFit" src="@/static/icon/iv_help.png"></image>
						</view>
						<view class="card-body">使用帮助</view>
					</view>
				</view>
				<view class="navbar-item">
					<view class="card card-a" @tap="openPage('/pages/set/set', true)">
						<view class="card-header">
							<image class="icon" mode="aspectFit" src="@/static/icon/iv_seet.png"></image>
						</view>
						<view class="card-body">设置</view>
					</view>
				</view>
				<view class="navbar-item">
					<view class="card card-a" @tap="handleLogout">
						<view class="card-header">
							<image class="icon" mode="aspectFit" src="@/static/icon/iv_zhuxiao.png"></image>
						</view>
						<view class="card-body">注销</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import { eventDeal, queryCountUnRead, logout } from '@/api/configure.js';
	import { deepClone, mergeUrls, getUserInfo, toLogin , randomNum} from '@/util/util.js';
	import { pathToBase64, base64ToPath } from '@/util/mmmm-image-tools/index.js';
	import configUrl from '@/util/url.js';

	export default {
		data() {
			return {
				roleName: '',
				userName: '',
				unReadCount: null,
				userId: '',
				registrationID: '',
				roleKey: '',
				threeOrganizationId: '',
				menus: [{
					id: 0,
					label: '案件流转',
					value: 'flow',
					icon: require('../../static/icon/iv_cm.png'),
					url: '/pages/flow/flow',
					show: false
				},{
					id: 4,
					label: '编码写入',
					value: 'nfc',
					icon: require('../../static/icon/iv_nfc.png'),
					url: '/pages/nfc/index',
					show: false
				},{
					id: 1,
					label: '城市防汛',
					value: 'floodControl',
					icon: require('../../static/icon/iv_yj.png'),
					url: '/pages/floodControl/floodControl',
					show: false
				},{
					id: 2,
					label: '公厕巡检',
					value: 'toilet',
					icon: require('../../static/icon/iv_wc_xuncha.png'),
					url: '/pages/toilet/index',
					show: false
				},{
					id: 3,
					label: '加水点巡查',
					value: 'fireHydrant',
					icon: require('../../static/icon/icon_fire_hydrant3.png'),
					url: '/pages/fireHydrant/index',
					show: false
				}]
			}
		},
		methods: {
			setMenu() {
				let rolesMenu = ['flow']
				let menu = [];
				
				if (this.roleKey == 'czry' && this.threeOrganizationId == '8fe23520c2194ce8b84c970685cb8b89') {
					menu = ['floodControl'];
				} else if (this.roleKey == 'xjy') {
					menu = ['floodControl', 'toilet', 'fireHydrant'];
				} else if(this.roleKey == 'dcy'){
					
				} else {
					
				}
				
				rolesMenu = [...rolesMenu, ...menu];
				
				this.menus.forEach(menu => {
					if(rolesMenu.includes(menu.value)) {
						menu.show = true;
					}
				})
			},
			openPage(url, permission) {
				if (!permission) {
					return
				}
				
				uni.navigateTo({
					url: url
				});
			},
			async jyJPush() {},
			init() {
				let userInfo = getUserInfo();
				
				if (userInfo && Object.keys(userInfo).length > 0 && userInfo['roles'][0]) {
					this.roleName = userInfo['roles'][0]['roleName'];
					this.userName = userInfo['userName'];
					this.userId = userInfo['userId'];
					this.roleKey = userInfo['roles'][0]['roleKey'];
					this.threeOrganizationId = userInfo['threeOrganizationId']
					
					this.setMenu();

					this.$store.dispatch({
						type: 'getUserInfo'
					});
				} else {
					toLogin();
				}
			},
			getCountUnRead() {
				let userInfo = getUserInfo();
				let userId = userInfo['userId'];
				
				let data = {
					userId: userId
				}

				queryCountUnRead(data).then((res) => {
					this.unReadCount = res.data;
				})
			},
			async logout() {
				this.$store.dispatch({
					type: 'logout'
				}).then(() => {
					uni.$emit('uploadGps.check');
				})
			},
			handleLogout() {
				let _this = this;

				uni.showModal({
					content: '确定要退出app吗？',
					success: (res) => {
						if (res.confirm) {
							this.logout();
						} else if (res.cancel) {

						}
					}
				});
			}
		},
		computed:{},
		onBackPress(options) {
			let _this = this;
			
			if (options.from === 'navigateBack') {
				return false;
			}
			
			this.handleLogout();
			
			return true;
		},
		onLoad() {
			this.init();
		},
		onReady() {
			let userInfo = getUserInfo();

			if (!userInfo) {
				toLogin();
			}
		},
		onShow() {
			this.getCountUnRead();
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #f29004;
	}

	.panel {
		padding: 20rpx 0px;
		background-color: #f29004;
		position: relative;
		top: 0rpx;
		left: 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.panel-header {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}

		.panel-body {
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #ffffff;
		}

		.panel-footer {
			font-size: 24rpx;
			color: #ffffff;
		}

		.panel-right {
			width: 66rpx;
			height: 66rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}
	}

	.navbar {
		padding: 10rpx;

		.navbar-group {
			display: flex;
			width: 100%;
			flex-wrap: wrap;

			.navbar-item {
				padding: 20rpx;
				width: 33.33%;
				box-sizing: border-box;
				position: relative;
				top: 0rpx;
				left: 0rpx;

				&:after {
					content: "";
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					border: 1rpx solid #bdbdbd;
					transform: scale(.5);
					transform-origin: 0 0;
					box-sizing: border-box;
					opacity: 0.382;
				}
			}
		}

		.card-a {
			position: relative;
			top: 0rpx;
			left: 0rpx;
			z-index: 2;

			.card-header {
				width: 100rpx;
				height: 100rpx;
				margin: 0rpx auto 10rpx;

				.icon {
					width: 100%;
					height: 100%;
				}
			}

			.card-body {
				font-size: 24rpx;
				text-align: center;
				color: #5d5d5d;
			}
		}
	}

	.card-not {
		.card-badge {
			position: absolute;
			top: 0rpx;
			right: -16rpx;
			padding: 6rpx 6rpx;
			font-size: 24rpx;
			line-height: 120%;
			text-align: center;
			border-radius: 16rpx;
			background-color: #d81e06;
			color: #fff;
			z-index: 9;
		}
	}
</style>
